<template>
	<view class="step1">
		<view class="scroll">
			<view class="title">
				租地信息
			</view>
			<view class="detail">
				<view class="com">
					<view class="tt">租地数量：</view>
					<view class="text">{{step.num}}块</view>
				</view>
				<view class="com">
					<view class="tt">可种植面积：</view>
					<view class="text">{{step.area}}平方</view>
				</view>
				<view class="com">
					<view class="tt">租地时间：</view>
					<view class="text">
						<u-radio-group v-model="radiovalue" placement="row" @change="radioChange">
							<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist" :key="index"
								:label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="com">
					<view class="tt">预计租金：</view>
					<view class="money">{{Number(step.money).toFixed(2)}}</view>
				</view>
				<!-- <view class="com">
					<view class="tt">到期自动续约：</view>
					<view class="text">
						<u-switch space="2" v-model="step.switch" size="20" activeColor="#f9ae3d"
							inactiveColor="rgb(230, 230, 230)">
						</u-switch>
					</view>
				</view> -->
			</view>
		</view>
		<view class="bottom">
			<u--form labelPosition="top" :model="step" :rules="rules" ref="uForm" labelWidth="80">
				<u-form-item label="姓名" prop="name" borderBottom ref="item1" required>
					<u--input v-model="step.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系方式" prop="phone" borderBottom ref="item1" required>
					<u--input v-model="step.phone" border="none"></u--input>
				</u-form-item>
				<u-form-item label="身份证号" prop="idCard" borderBottom ref="item1" required>
					<u--input v-model="step.idCard" border="none"></u--input>
				</u-form-item>
			</u--form>
			<view class="btn df">
				<view class="up" @click="stepUp(0)">
					上一步
				</view>
				<view class="down" @click="stepUp(2)">
					下一步
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {findRentsByLandS} from "@/api/api.js"
	export default {
		data() {
			return {
				step: {
					num: '',
					area:'',
					money: '',
					// switch: '',
					name: '',
					phone: '',
					idCard: ''
				},
				radiovalue: '',
				calcParams:{},
				radiolist: [{
						name: '3个月'
					},
					{
						name: '6个月'
					},
					{
						name: '一年'
					}
				],
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'idCard': [{
							required: true,
							message: '请输入身份证号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.idCard(value);
							},
							message: '身份证号不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		mounted() {
			this.handleParams()
		},
		computed:{
			...mapState(['contractInfo'])
		},
		methods: {
			stepUp(i) {
				if(i == 0){
					this.$emit('step', {index:i})
				}else{
					if(!this.radiovalue){
						uni.showToast({
							icon:'error',
							title:'请选择租期'
						})
						return
					}
					this.$refs.uForm.validate().then(res=>{
						if(res){
							let formData = {
								details:this.contractInfo.details,
								tenancyDuration:this.radiovalue,
								tenancyNum:this.step.num,
								rent:this.step.money,
								fosterName:this.step.name,
								phone:this.step.phone,
								idNumber:this.step.idCard,
								contractPicture:'',
								}
							this.$emit('step', {index:i,formData:formData})
						}
					}).catch(err=>{
						uni.$u.toast('请正确填写信息')
					})
				}
			},
			handleParams(){
				let landData = this.contractInfo
				let area = landData.details.reduce((prev,cur)=> prev+cur.totalArea,0)
				let sum = landData.details.length
				let ids = landData.details.map(item=> item.landId)
				let params = {
					landS:ids,
				}
				this.calcParams = params
				this.step.num = sum
				this.step.area = area
			},
			radioChange(v){
				let tenancyDuration 
				switch (v){
					case '3个月':
					tenancyDuration = 'three'
						break;
					case '6个月':
					tenancyDuration = 'six'
						break;
					case '一年':
					tenancyDuration = "year"
						break;
				}
				this.calcParams.tenancyDuration = tenancyDuration
				this.borrowLandCost(this.calcParams)
			},
			async borrowLandCost(landIdsAndTime){
				const res = await findRentsByLandS(landIdsAndTime)
				if(res?.data.code == 200){
					this.step.money = res.data.data
				}else{
					uni.showToast({
						icon:'error',
						title:'请求失败'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.step1 {

		.df {
			display: flex;
		}

		.scroll {
			width: 670rpx;
			// height: 152rpx;
			padding: 34rpx 40rpx 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			margin-bottom: 30rpx;

			.title {
				font-size: 32rpx;
				color: #282828;
				margin-bottom: 36rpx;
				font-weight: bold;
			}

			.com {
				display: flex;
				margin-top: 28rpx;
				font-size: 32rpx;

				.tt {
					color: rgba(68, 78, 104, 0.7);
				}

				.text {
					color: #1D1D1D;
				}

				.money {
					color: #FA680A;
				}
			}
		}

		.bottom {
			padding: 30rpx 50rpx;
			padding-top: 0;

			.btn {
				justify-content: space-between;
				margin-top: 60rpx;

				.up {
					width: 280rpx;
					height: 88rpx;
					background: rgba(27, 196, 109, 0.1);
					border-radius: 12rpx;
					border: 2rpx solid #1BC46D;
					line-height: 88rpx;
					text-align: center;
					color: #17CC77;
				}

				.down {
					width: 280rpx;
					height: 88rpx;
					background: #1BC46D;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
					border-radius: 12rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}

	}
</style>